<template>
<div class="login flex-center">
	<div class="wapper">
		<img class="logo" src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc10cb71c7c9a801e346eb8a9f850a7f04fc69df3edaf038a7ec9d01d0b198914"/>
		<div class="title">AI 多模态综合评估</div>
		<input placeholder="请输入用户名" v-model="account"/>
		<input placeholder="请输入密码" type="password" v-model="password"/>
		<el-button type="primary" style="width: 300px;" @click="login" :loading="loading">登 录</el-button>
	</div>
</div>
</template>
<script setup>
import {loginAPI} from "@/api/auth.js";
import {ref} from 'vue'
import {ElMessage} from "element-plus";
import useUserStore from "@/stores/user.js";
import {useRouter} from "vue-router";

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const account = ref('')
const password = ref('')

const login = async () => {
	loading.value = true
	try{
		const res = await loginAPI(account.value, password.value);
		if(res.data.code === 0 || res.data.code === 200){
			userStore.setToken(res.data.data.userInfo.data)
			userStore.setUserInfo(res.data.data.userInfo)
			ElMessage.success("登录成功!")
			setTimeout(()=>{
				router.push({path: '/index'})
			}, 1000)
		}else{
			ElMessage.error(res.data.msg)
		}
	}catch (error) {
		console.log(error)
	}finally {
		loading.value = false
	}

}
</script>
<style scoped lang="scss">
.login{
	width: 100%;
	height: 100%;
	background: #fff;
	.wapper{
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			color: #0D8CFF;
			font-size: 28px;
			margin-top: 24px;
			margin-bottom: 83px;
		}
		input{
			//去除输入框默认样式
			-webkit-appearance: none;
			outline: none;
			border: none;
			height: 42px;
			width: 300px;
			background: #F0F1F1;
			border-radius: 4px;
			margin-bottom: 16px;
			padding: 0 20px;
			//聚焦时的边框样式
			&:focus{
				box-shadow: 0 0 0 1px #0D8CFF;
			}
		}
	}
}
</style>